<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
              * { margin: 0; padding: 0; box-sizing: border-box; }
              body { font: 13px Helvetica, Arial; }
              div { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
              div input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
              div button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
              #messages { list-style-type: none; margin: 0; padding: 0; }
              #messages li { padding: 5px 10px; }
              #messages li:nth-child(odd) { background: #eee; }
              p{padding:5px 10px;}
        .opp>section{
            clear: both;
        }
        .opp>#onlineUser{
            float: left;
        }
        .opp>#plp{
            float: left;
        }

            </style>
      </head>
  <body>
<div class="opp">
 <p id="onlineUser">在线人数:0</p>
    <div id="plp">

    </div>
    <section></section>
</div>
   
    <ul id="messages">

</ul>
     
    <div>
          <input id="m" autocomplete="off" /><button type="button" onclick="toSetMsg(1)">发送消息</button><button type="button" onclick="toSetMsg(0)">设置用户名</button>
        </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    var myName=false;

    var socket= io(window.location.href);
    socket.on('newperson',function(v){
        $('#onlineUser').text('在线人数:'+v.peoples.length+'。在线列表:');
        $('#plp').html(v.peoples.map(function (a) {
            return '<div>'+a.name+'</div>'
        }).join(""))
        $('#messages').append($('<li>').text('已连接至服务器,'));
    });
    function toSetMsg (i) {
        var om = document.getElementById('m').value
        console.log(i)
        if (!om) {return}
        console.log(1233312)
       i&&socket.emit('setmsg', om)
       !i&&socket.emit('setname', om)
    }
    //监听system事件，判断welcome或者disconnect，打印系统消息
    socket.on('system',function(json){
        console.log(json)
        $('#messages').append($('<li>').text(json.info.msg));
        $('#onlineUser').text('在线人数:'+json.peoples.length+'。在线列表:');
        $('#plp').html(json.peoples.map(function (a) {
            return '<div>'+a.name+'</div>'
        }).join(""))
    });

    //监听服务端的chat message事件，接受每一条消息
</script>
 
</body>
</html>